import React, { useState } from 'react';

const EmptyFolderIcon = () => (
  <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M50 15H30L25 10H10C7.24 10 5 12.24 5 15V45C5 47.76 7.24 50 10 50H50C52.76 50 55 47.76 55 45V20C55 17.24 52.76 15 50 15ZM50 45H10V20H50V45Z" fill="#CCCCCC"/>
  </svg>
);

const IntegratedWebsite = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [typeFilter, setTypeFilter] = useState('');
  const [showExampleData, setShowExampleData] = useState(false);
  
  // 模拟网站数据
  const exampleWebsites = [
    {
      id: 1,
      name: '我的WordPress博客',
      strategiesCount: 2,
      member: '管理员',
      status: '已授权',
      authTime: '2023-04-01 10:30',
      time: '2023-04-01',
      type: 'wordpress'
    }
  ];
  
  const handleSearch = () => {
    setShowExampleData(true);
  };
  
  const handleReset = () => {
    setSearchQuery('');
    setTypeFilter('');
    setShowExampleData(false);
  };

  return (
    <div className="integrated-website-page">
      <h2>集成网站</h2>
      <p className="page-description">通过集成您的网站或blog平台，实现文章的自动发布</p>
      
      <div className="website-actions">
        <div className="search-filter-container">
          <div className="search-input">
            <input 
              type="text" 
              placeholder="按文章筛选" 
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
            <select 
              value={typeFilter}
              onChange={(e) => setTypeFilter(e.target.value)}
            >
              <option value="">按类型筛选</option>
              <option value="wordpress">WordPress</option>
              <option value="custom">自定义网站</option>
              <option value="blog">博客平台</option>
            </select>
            <button className="btn-primary" onClick={handleSearch}>查 询</button>
            <button className="btn-outline" onClick={handleReset}>重 置</button>
          </div>
        </div>
        <button className="btn-primary new-integration-btn">
          <span className="btn-icon">+</span> 新的集成
        </button>
      </div>
      
      <div className="website-table">
        <table>
          <thead>
            <tr>
              <th>名称</th>
              <th>自动策略数量</th>
              <th>绑定成员</th>
              <th>状态</th>
              <th>授权时间</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {showExampleData && exampleWebsites.map(website => (
              <tr key={website.id}>
                <td>{website.name}</td>
                <td>{website.strategiesCount}</td>
                <td>{website.member}</td>
                <td><span className="status-badge">{website.status}</span></td>
                <td>{website.authTime}</td>
                <td>{website.time}</td>
                <td>
                  <button className="btn-text">编辑</button>
                  <button className="btn-text btn-danger">删除</button>
                </td>
              </tr>
            ))}
            
            {!showExampleData && (
              <tr className="empty-data-row">
                <td colSpan={7}>
                  <div className="empty-data-container">
                    <div className="empty-icon">
                      <EmptyFolderIcon />
                    </div>
                    <div className="empty-text">暂无数据</div>
                  </div>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      
      {/* <div className="integration-guide">
        <h3>如何集成网站</h3>
        <ol className="guide-steps">
          <li>在您的WordPress网站上安装并激活 <strong>"WordPress REST API"</strong> 插件</li>
          <li>获取您的网站API密钥及访问令牌</li>
          <li>在上方"新的集成"中填写您的网站信息</li>
          <li>测试连接成功后，您就可以自动发布文章了</li>
        </ol>
      </div> */}
    </div>
  );
};

export default IntegratedWebsite; 